<script setup>
	import {
		Position,
		Handle
	} from '@vue-flow/core'

	const props = defineProps(['label'])
</script>

<template>
	<div class="_container">
		<div class="fx fx-c_center pad-16 header">
			<div class="fx fx-center wh-40 logo">
				<jb-icon :local="true" icon="fluent:chat-bubbles-question-16-filled" width="30" color="#2263c5"></jb-icon>
			</div>
			<div class="ml-10 tc-dark">
				<div>从这里开始</div>
				<p class="font-12 tc-assist">接收到用户的提问</p>
			</div>
		</div>
		<div class="footer pad-16">
			<p class="tc-gray ">输出字段</p>
			<div class="output mt-8 pad-8 fx fx-c_center fx-m_between">
				<div class="fx fx-c_center">
					<div class="output-flag"></div>
					<span class="tc-gray ml-8">prompt</span>
				</div>
				<span class="tc-assist">用户的提问</span>
			</div>
		</div>

		<Handle type="source" id="success" :position="Position.Right" />
	</div>
</template>

<style scoped>
	._container {
		background-color: #fff;
		border: 1px solid #e5e7eb;
		border-radius: 12px;
		box-sizing: border-box;
		width: 260px;
		box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
	}

	.header {
		border-bottom: 1px solid rgb(229, 231, 235);
	}

	.logo {
		background: #dce6fc;
		border-radius: 12px;
	}

	.output {
		background: rgb(249, 250, 251);
		border-radius: 12px;
	}

	.output-flag {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #22c55e;
	}
</style>